<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>PPGO 接口平台</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="format-detection" content="telephone=no">

        <link rel="stylesheet" href="/static/layui/css/layui.css">
        <link rel="stylesheet" href="/static/css/apidoc.css?t={{.ts}}" media="all">
        <link rel="stylesheet" href="/static/font-awesome/css/font-awesome.min.css" media="all">
    </head>
    <body style="overflow-x:hidden">

    <div class="layui-header">
        <div style="float: left;background: #393D49;width:20%;height: 60px;line-height: 60px;">
           <a class="" href="/" style="margin-left: 20px;">
                <img src="/static/img/logo.png" alt="ppgo_admin" style="width: 100px;">
            </a> 
        </div>
        <div style="float: right;width: 80%;">
            <ul class="layui-nav" >
                <li class="layui-nav-item layui-this">
                    <a href="###">文档</a> 
                </li>
                <li class="layui-nav-item ">
                    <a href="/home">后台<!-- <span class="layui-badge-dot"></span> --></a>
                </li> 
            </ul>
        </div>
        
    </div>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]--> 

    <div class="layui-main layui-row" style="width: 100%;">
        <div class="site-tree layui-col-md2 layui-hide-xs">
            <div class="layui-form" style="height: 38px; margin: 10px 13px 0 0;padding-left: 10px;margin-bottom: 20px;">
                <select lay-filter="groups" lay-search>
                    {{range $index,$elem := .grouplists}}
                        <option value="{{$elem.Id}}" {{if eq $elem.Id $.groupId}} selected {{end}}>{{$elem.GroupName}}</option>
                    {{end}}
                </select>
            </div>
            <ul class="layui-tree">
                <li><h2>基础说明</h2></li>
                <ul>
                    {{range $pi, $pe := .apiPublic}}
                    <li class="site-tree-noicon">
                        <a href="###" data-type="public" data-id="{{$pe.Id}}">
                            <cite>{{$pe.ApiPublicName}}</cite>
                        </a>
                    </li>
                    {{end}}
                    <li class="site-tree-noicon">
                        <a href="###" data-type="env" data-id="{{.groupId}}">
                            <cite>环境说明</cite>
                        </a>
                    </li>

                    <li class="site-tree-noicon">
                        <a href="###" data-type="code" data-id="{{.groupId}}">
                            <cite>状态码说明</cite>
                        </a>
                    </li>
                </ul>
                {{range $index, $elem := .apiMenu}}
                {{if $elem}}
                    <li><h2>{{$elem.SourceName}}</h2></li>
                    {{range $i, $e := $elem.ApiLists}}
                    <li class="site-tree-noicon">
                        <a href="###" data-type="apidetail" data-id="{{$e.Id}}">
                            <cite>{{$e.ApiName}}</cite>
                            <em></em>
                        </a>
                    </li>
                    {{end}}
                {{end}}
                {{end}}
            </ul>
            <div style="clear:both"></div>
            <div class="copyrights">power by ppgo_admin</div>
        </div>

        <div class="site-content layui-col-md10">
            <div class="site-content-header"><i class="fa fa-bars" aria-hidden="true" id="taggle"></i>&nbsp;&nbsp;<span id="content-title">欢迎使用PPGo-ApiAdmin</span> </div>
            <div id="api-main">
                <div style="width: 200px;height: 50px;margin: 200px auto;">
                    <img src="/static/img/logo_white.png" alt="">
                </div>
            </div>
        </div>
    </div>
  
<!--     <div class="layui-footer">
        <div class="layui-main">
            <p>&copy; 2018 <a href="/">PPGo_ApiAdmin</a> MIT license</p>
        </div>
    </div> -->
    <script src="/static/layui/layui.js?s=36"></script>

    <script>
    layui.use(['element', 'layer','form','jquery'], function(){
        var element = layui.element
        ,layer = layui.layer;
        var form = layui.form;
        var $ = layui.jquery;
        var windowWidth    = $(document.body).outerWidth(true);
        var windowHeight   = $(window).height();
        var contentHeight = windowHeight-$('.layui-header').outerHeight(true);
        $("#api-main").height(contentHeight-$('.site-content-header').outerHeight(true));
        $(".site-tree").height(contentHeight);


        $(".layui-tree").find("li a").on("click",function(){
            var hs = $(this)
            if (hs) {
               $(".layui-tree").find("a").removeClass("active");
                hs.addClass("active");
                var title = hs.find("cite").text();
                $("#content-title").html(title);
                $("#api-main").load("/apidoc/"+hs.attr("data-type")+"?id="+hs.attr("data-id"));
            }else{
                //taggle
            }
        })

        $("#taggle").on("click",function(){
            var dis = $(".site-tree").css('display');
            if (dis=="none") {
                var treeWidth = $('.site-tree').outerWidth(true)
                $(".site-content").width(windowWidth-treeWidth);
                $(".site-tree").show();
            }else{
                $(".site-tree").hide();
                $(".site-content").width(windowWidth);
            }
        })

        form.on('select(groups)', function(data){
            window.location.href="/apidoc/index?id="+data.value;
        });



        form.render();
    });
    </script>
    </body>
</html>